<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
        status-icon>
        <el-form-item label="证件照上传" prop="idphotoFileId">
            <ImageUpload v-model="ruleForm.idphotoFileUrl" :uploadType="2" @change="ruleForm.idphotoFileId = $event" />
        </el-form-item>
        <div class="three">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="ruleForm.idcard" maxlength="18" />
            </el-form-item>
            <el-form-item label="联系电话" prop="linkPhone">
                <el-input v-model="ruleForm.linkPhone" maxlength="11" />
            </el-form-item>
        </div>
        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男" />
                <el-radio label="女" />
            </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证照片" prop="idcardFileId">
            <ImageUpload v-model="ruleForm.idcardFileUrl" @change="ruleForm.idcardFileId = $event" />
        </el-form-item>
        <el-form-item label="工作单位(在校生填写学校名称)" prop="workCompany">
            <el-input v-model="ruleForm.workCompany" />
        </el-form-item>
        <el-form-item label="证书邮寄地址" prop="addr" maxlength="100">
            <el-input v-model="ruleForm.addr" />
        </el-form-item>
    </el-form>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
const ruleFormRef = ref()
const formSize = ref('default')

const props = defineProps({
    ruleForm: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const rules = reactive({
    idphotoFileId: [
        {
            // validator: photoImageValidator,
            required: true,
            message: '请上传证件照',
            trigger: 'change',
        },
    ],
    name: [
        { required: true, message: '请输入', trigger: 'blur' },
        { min: 2, max: 20, message: '名字长度为2-20', trigger: 'blur' },
    ],
    idcard: [
        {
            required: true,
            message: '请输入18位身份证号码',
            trigger: 'blur',
        },
        { min: 18, max: 18, message: '请输入18位身份证号码', trigger: 'blur' },
    ],
    linkPhone: [
        {
            required: true,
            message: '请输入11位手机号码',
            trigger: 'blur',
        },
        { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
    ],
    delivery: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    idcardFileId: [
        {
            required: true,
            message: '请上传身份证照片',
            trigger: 'change',
        },
    ],
    workCompany: [
        {
            required: true,
            message: '请输入',
            trigger: 'blur',
        },
    ],
    addr: [
        {
            required: true,
            message: '请输入',
            trigger: 'blur',
        },
    ]
})

const submitForm = async (finish) => {
    if (!ruleFormRef.value) {
        finish(false)
        return
    }
    await ruleFormRef.value.validate((valid, fields) => {
        console.log(valid, fields)
        if (valid) {
            finish(true)
        } else {
            finish(false)
        }
    })
}
defineExpose({
    submitForm
})
</script>
<style lang="scss" scoped>
.three{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.demo-ruleForm{
    :deep(.el-form-item__label) {
		white-space: pre-wrap;
		text-align: right;
		height: auto;
		line-height: 20px;
		width: 150px !important;
	}
	:deep(.el-form-item) {
		margin-right: 0;
		// align-items: center;
		// margin-bottom: 0 !important;
	}
}
</style>